<template>
  <div class="home">
    <div class="list">
      <input type="text" v-model="newItem" />
      <button @click="handleAdd" class="btn">添加</button>
    </div>
    <About :msg="msg" />
    <ul class="list">
      <li class="item" v-for="(featuer, index) of features" :key="index">
        {{ featuer.name }}--{{ featuer.version }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
// @ is an alias to /src
import Feature from "@/models/feature";
import { getFeatures } from "@/api/feature";
import About from "@/views/About.vue";
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {
    About
  }
})
export default class Home extends Vue {
  private name!: "Home";
  // 声明属性作为data
  private features: Feature[] = [];
  private msg = "我是要传递给子组件的值";
  private newItem = "";
  private handleAdd() {
    this.features.push({
      id: this.features.length + 1,
      name: this.newItem,
      version: "1.0"
    });
    this.newItem = "";
  }
  mounted() {
    getFeatures().then((res: any) => {
      console.log(res);
      this.features = res.data;
    });
  }
}
</script>
<style scoped lang="scss">
ul > li {
  list-style: none;
}
.list {
  width: 600px;
  margin: 0 auto 30px;
  .btn {
    margin-left: 20px;
  }
  li {
    border-bottom: 1px solid #ccc;
  }
}
</style>
